<template>
    <swipeout class="goodlistul">
		<div v-for="item in list" :key="item.id">
			<template v-if="!item.noSales">
				<template v-if="item.activityTypes==1&&parseInt(item.limitActivityInfo.goodsLeftCount)<=parseInt(item.inventoryQty)">
					<p v-if="parseInt(item.limitActivityInfo.limitQty)<parseInt(item.cmmdtyQty)" class="stock">商品数量不足，您最多可购买{{item.limitActivityInfo.limitQty}}件</p>
				</template>
				<template v-else>
					<p v-if="parseInt(item.inventoryQty)<parseInt(item.cmmdtyQty)" class="stock">商品数量不足，您最多可购买{{item.inventoryQty}}件</p>
				</template>
			</template>
			<swipeout-item class="goodsdetail" :threshold=".5" underlay-color="#ccc" :class="{noSales: item.noSales}">
				<div slot="right-menu">
					<swipeout-button @click.native="updateCart({type: 'del', item})" background-color="#D23934">删除</swipeout-button>
				</div>
				<div slot="content" class="demo-content vux-1px-tb">
					<label>
						<span class="tag-disable" v-if="item.noSales">失效</span>
						<span class="m-cb" v-else>
							<input type="checkbox" 
								@click="updateCart({type: 'checked', item})" 
								:checked="item.tickStatus==1?true:false">
							<i></i>
						</span>
						<router-link class="proimg" :to="'/detail/'+item.cmmdtyCode+'/'+item.shopCode">
							<img :src="item.cmmdtyCode | newImgUrl(item.imageFlag)" @error="error">

							<!--判断是否有抢购活动 并且抢购库存小于总库存-->
							<template v-if="item.activityTypes==1&&parseInt(item.limitActivityInfo.goodsLeftCount)<=parseInt(item.inventoryQty)">
								<p v-show="parseInt(item.limitActivityInfo.goodsLeftCount)<10">仅剩{{item.limitActivityInfo.goodsLeftCount}}件</p>
							</template>
							<template v-else>
								<p v-show="parseInt(item.inventoryQty)<10">仅剩{{item.inventoryQty}}件</p>
							</template>
						</router-link>
						<router-link :to="'/detail/'+item.cmmdtyCode+'/'+item.shopCode">
							<div>
								<p class="name">{{ item.cmmdtyName }}</p><a href="javascript:;" class="delete"></a>
								<p class="specifications">{{ item.commdtySpec }}</p>

								<!--有限时限量并且价格大于0-->
								<p style="overflow:auto;-webkit-line-clamp:2" v-if="item.activityTypes==1&&parseFloat(item.limitActivityInfo.promotPrice)>0"><em>&yen;{{ item.limitActivityInfo.promotPrice }}</em></p>
								<p style="overflow:auto;-webkit-line-clamp:2" v-else-if="parseFloat(item.salesPrice)>0"><em>&yen;{{ parseFloat(item.salesPrice).toFixed(2) }}</em></p>
								<p style="overflow:auto;-webkit-line-clamp:2" v-else><em>暂无报价</em></p>
								<!--限时限量商品展示图标-->
								<template v-if="item.activityTypes==1">
									<span class="act-type icon-1">限时抢</span> <span class="act-type icon-2">限购{{item.limitActivityInfo.limitQty}}件</span>
								</template>
							</div>
						</router-link>
					</label>
					<div class="ops" v-if="!item.noSales">
						<a href="javascript:void(0)" class="minus" @click="updateCart({type: 'minus', item})"></a>
						<input type="text" :value="item.cmmdtyQty" readonly>

						<!--判断限时限量 库存数小于购物车数量且购物车数量大于99 置灰添加按钮-->
						<template v-if="item.activityTypes==1&&parseInt(item.limitActivityInfo.limitQty)<=parseInt(item.inventoryQty)">
							<a v-if="parseInt(item.cmmdtyQty)<parseInt(item.limitActivityInfo.limitQty)&&parseInt(item.cmmdtyQty)<parseInt(item.limitActivityInfo.goodsLeftCount)&&parseInt(item.cmmdtyQty)<99" href="javascript:void(0)" class="add" @click="updateCart({type: 'add', item})"></a>
							<a v-else href="javascript:void(0)" class="add disabled" @click="noSale(item.activityTypes)"></a>
						</template>
						<template v-else>
							<a v-if="parseInt(item.cmmdtyQty)<parseInt(item.inventoryQty)&&parseInt(item.cmmdtyQty)<99" href="javascript:void(0)" class="add" @click="updateCart({type: 'add', item})"></a>
							<a v-else href="javascript:void(0)" class="add disabled" @click="noSale(item.activityTypes)"></a>
						</template>
						
					</div>
					<div class="ops" v-else>
						<input type="text" value="清除" @click="clearItem(item)" readonly>
					</div>
				</div>
			</swipeout-item>
		</div>
    </swipeout>
</template>
<script>
import { mapActions } from 'vuex'
import { Swipeout, SwipeoutItem, SwipeoutButton } from 'vux'
export default {
    components: {
		Swipeout,
		SwipeoutItem,
        SwipeoutButton
	},
    methods: {
		...mapActions ([
			'updateCart'
		]),
		error(e) {
			e.target.src = "/static/images/pro-default.png"
		},
		noSale(type){
			if(type==1){
				AlertBox({
					type: 'mini',
					msg: '亲，限购商品，只能买这么多哦'
				})
			}else{
				AlertBox({
					type: 'mini',
					msg: '亲，购买商品库存不足啦~先买这么多，我们会尽快补货哦'
				})
			}
			
		},
		clearItem(item) {
			let that = this;

			AlertBox({
				type: "doubleBtn",
				alertType: "fixed",
				msg: "要删除该商品？",
				confirm: function(){
					that.updateCart({type: 'del', item});
				}
			});
		}
	},
    props: ['list']
}
</script>
<style lang='scss' scoped>
	@function _($px) {
		$rem: $px/50;
		@return #{$rem}rem;
	}
    .m-cb {
		position: relative;
		display: inline-block;
		vertical-align: middle;
		input[type=checkbox] {
			position: absolute;
			left: 0;
			top: 0;
			opacity: 0;
			width: .88rem;
			height: .88rem;
			cursor: pointer;
		}
		i {
			float: left;
			width: .88rem;
			height: .88rem;
			background: url(../images/unchecked.png) no-repeat;
			background-size: contain;
			margin-right: 5px;
		}
		input[type=checkbox]:checked+i {
		    background-image: url(../images/checked.png)
		}
	}
	.goodlistul{
		background-color: #fff;
		.stock{
			color:#e20200;
			height:_(40);
			line-height:_(40);
			background-color: #f4f4f4;
			margin: _(18) 0 _(10) _(120);
			padding-left: _(10)
		}
	}
	
	.goodlistul .goodsdetail {
		
		.demo-content {
			font-size: .56rem;
			background: #fff;
			position: relative;
			transition: all .5s;
			box-sizing: border-box;
			padding: .56rem 0 .56rem .8rem;
			border-bottom: 1px solid #e8e8e8;
			
			.m-cb{
				float: left;
				margin-top: 1.2rem;
				margin-right: .4rem;
			}
			label {
				line-height: 1;
				display: block;
				height: 3.68rem;
				z-index: 4;
				.tag-disable {
					float: left;
					margin: _(65) _(20) 0 0;
					padding: 0 2px;
					height: _(30);
					background: #F0F0F0;
					line-height: _(30);
					font-size: _(22);
					color: #999;
				}
			}
			.proimg{
				display: inline-block;
				position: relative;
				width: 3.2rem;
				height: 3.2rem;
				p{
					position: absolute;
					bottom:0;
					left:0;
					right:0;
					width: 3.2rem;
					height: 0.6rem;
					line-height: 0.6rem;
					background-color: rgba(0,0,0,.3);
					color: #fff;
					text-align: center;
					font-size:_(24)
				}
			}
			img {
				width: 3.2rem;
				height: 3.2rem;
				margin-right: .24rem;
				float: left
			}
			div {
				float: right;
				width: 9rem;
				position: relative;
				font-size: _(28);
			}
			p {
				width: 8.76rem;
				letter-spacing: .88px;
				display: -webkit-box;
				-webkit-line-clamp: 1;
				-webkit-box-orient: block-axis;
				text-overflow: ellipsis;
				overflow: hidden;
				margin-bottom: .02rem;
				line-height: .7rem;
				em {
					color: #ff782d;
					font-size: .48rem
				}
			}
			.act-type{
				display: inline-block;
				color:#ff782d;
				border: 1px solid #ff782d;
				height:_(32);
				line-height:_(32);
				border-radius: _(10);
				font-size: _(24);
				padding:0 _(5);
				margin-top:_(30);
				&.icon-1{
					background-color: #ff782d;
					color: #fff;
				}
				&.icon-2{
					border: 1px solid #7ed321;;
					color: #7ed321;
				}
			}
			b {
				font-weight: normal;
				font-size: .48rem;
				background: #f00;
				color: #fff;
				padding: .02rem .12rem;
				padding-left: .08rem;
				padding-right: .08rem
			}
			.name {
				line-height: _(40);
				color: #333
			}
			.specifications {
				line-height: _(50);
				color: #999;
				font-size: _(24)
			}
			strong {
				margin-left: .4rem;
				padding: 0 .36rem;
				color: #f60;
				border: 1px solid #f60;
				border-radius: 77px;
				font-weight: normal
			}
			.ops {
				width: _(206);
				height: _(66);
				float: right;
				margin-right: .48rem;
				border: 1px solid #d9d9d9;
				border-radius: 1.04rem;
				font-size: 0;
				position: absolute;
				bottom: .56rem;
				right: 0;
				text-align: center;
				a {
					font-size: .72rem;
					color: #666;
					width: _(66);
					height: _(66);
					line-height: _(66);
					display: inline-block;
					text-align: center;
					vertical-align: top;
					-webkit-appearance: none
				}
				input {
					font-size: .52rem;
					color: #666;
					width: _(66);
					height: 100%;
					line-height: _(66);
					display: inline-block;
					text-align: center;
					vertical-align: top;
					border: none;
					-webkit-appearance: none
				}
				.add {
					background: url(/static/images/plus.png) no-repeat center;
					background-size: _(20);
				}
				.minus {
					background: url(/static/images/minus.png) no-repeat center;
					background-size: _(20) _(3);
				}
				.disabled {
					color: #d9d9d9
				}
				input {
					border-radius: 0
				}
			}

			
		}
		&.noSales{
			.demo-content {
				.name{
					color: #666;
				}
				.proimg{
					p{
						display:none;
					}
				}
				.proimg:after{
					display: block;
					width: 100%;
					height: 100%;
					content: " ";
					position: absolute;
					top: 50%;
					left: 50%;
					background: url('/static/images/soldout_old.png') center center no-repeat;
					background-size: _(136) _(117);
					transform: translate(-50%, -50%);
					-webkit-transform: translate(-50%, -50%);
				}
				p{
					&.name{
						color: #999;
					}
					em{
						color: #999;
					}
				}
				
			}
		}
	}
</style>